<template>
  <div>
    <el-button
      v-if="!item.hide"
      :type="item.type ? (item.type === 'default' ? '' : item.type) : 'primary'"
      v-for="(item, index) in mainBtns"
      size="mini"
      :key="index"
      :class="`btn-${item.icon}`"
      :icon="item.iconImg ? '' : `iconfont ${item.icon}`"
      :style="
        item.color ? { background: item.color, borderColor: item.color } : {}
      "
      :disabled="disabled(item)"
      @click="btnClick(item, $event)"
      :loading="item.loading"
      ><i v-if="item.iconImg" class="el-icon--left" :class="item.iconImg"></i
      >{{ item.name }}</el-button
    >
    <el-dropdown v-if="dropDownBtns.length" class="dropdown">
      <el-button size="mini" type="primary">
        更多
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in dropDownBtns"
          @click.native="btnClick(item, $event)"
          :disabled="disabled(item)"
          :key="index"
          :icon="item.icon"
          >{{ item.name }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
/**
 * 按钮组
 * 最重要，越需要展示出来的按钮在数组中应该越靠后
 */
import { mapGetters } from 'vuex';
export default {
  props: {
    // 按钮数组，索引越后的按钮越重要，比如默认显示三个按钮，超过三个按钮时，其他按钮放到下拉按钮组，那展示出来的按钮则是后三个按钮，按钮顺序也是按照数组中顺序展示
    btns: {
      type: Array,
      default() {
        return [];
      }
    },
    max: {
      type: Number,
      default: 2
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    mainBtns() {
      // console.log(this.permissions.analysis_financeEngine_view)
      const list = this.btns.filter((item) => {
        const c1 = !(
          item.permissions && this.permissions[item.permissions] !== true
        );

        if (typeof item.show === 'boolean') {
          return c1 && item.show;
        }
        if (typeof item.show === 'function') {
          const c2 = item.show();
          return c1 && c2;
        }
        return c1;
      });
      // !(item.permissions && this.permissions[item.permissions] !== true)

      let start = list.length - this.max;
      if (start < 0) {
        start = 0;
      }
      if (start > 0) {
        start += 1;
      }
      return list.slice(start);
    },
    dropDownBtns() {
      const list = this.btns.filter(
        (item) =>
          !(item.permissions && this.permissions[item.permissions] !== true)
      );

      const end = list.length - this.max;
      if (end <= 0) {
        return [];
      }

      return list.slice(0, end + 1);
    }
  },
  methods: {
    disabled(btn) {
      if (typeof btn.disabled === 'function') {
        return btn.disabled();
      }
      return btn.disabled;
    },
    btnClick(btn, event) {
      if (typeof btn.click === 'function') {
        btn.click(event, btn);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dropdown {
  margin-left: 10px;
}
.el-icon--left {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-bottom: 4px;
  vertical-align: middle;
  &:before {
    content: '' !important;
  }
}

// 新增
.btn-icon-xinzeng_tianjia,
.btn-icon-save {
  background: #60c167;
}

.btn-icon-Import_line {
  background: #55a5e3;
}

.btn-icon-export_line {
  background: #9381c1;
}

.btn-icon-waybill {
  background: #55a5e3;
}

.btn-icon-edit_line {
  background: #2cb8b2;
}

.btn-icon-clear_line {
  background: #e85960;
}

.btn_icon-fabu {
  background: #f37938;
}

.btn_icon-shenhe {
  background: #f37938;
}

.btn_icon-stop_line {
  background: #e85960;
}

.btn_icon-putongzhihang {
  background: #60c167;
}

.btn-icon-search_line {
  background: #f37938;
}

.btn-icon-qingkong {
  background: #dfe1e2;
}

.btn-icon-back {
  color: #8c8c8c !important;
  background: #f4f4f4 !important;
  border: 1px solid #c2b9b9 !important;
}
</style>
